<template>
    <div>
        {{ inputVal }} -- {{ childCount }} <br />
        <input type="text" v-model="inputVal" @keyup="changeIpt" />
        <button @click="addCount">addCount</button>
    </div>
</template>

<script>
import { reactive, toRefs } from 'vue';

export default {
    props: {
        foo: {
            type: String,
            required: true,
        },
        count: {
            type: Number,
            required: true,
        },
    },
    setup (props, context) {
        console.log(context, props);
        const { emit } = context;
        const state = reactive({
            inputVal: props.foo,
            childCount: props.count,
        });
        const addCount = () => {
            state.childCount += 1;
            emit('update:count', state.childCount);
        };
        const changeIpt = (e) => {
            state.inputVal = e.target.value;
            emit('update:foo', state.inputVal);
        };
        return {
            ...toRefs(state), addCount, changeIpt,
        };
    },
};
</script>
